<template>
  <div class="floor-layout tpl-63">
    <div class="layout-main"
      :class="data.blockClass"
      :style="!data.blockTitle.showTitle?
      `padding-left:${data.blockStyle.pagePadding}px;
      padding-right:${data.blockStyle.pagePadding}px;
      margin-left:-${data.blockStyle.proPadding/2}px;
      margin-right:-${data.blockStyle.proPadding/2}px;`:`padding-left:${data.blockStyle.pagePadding}px;
      padding-right:${data.blockStyle.pagePadding}px;`">
      <div class="goods_box"
        :style="data.blockTitle.showBackground?
        `padding:${data.blockStyle.proPadding/2}px;
        border-radius:${data.blockTitle.backRadius}px;
        background:${data.blockTitle.backColor}`:`margin-left:-${data.blockStyle.proPadding/2}px;
        margin-right:-${data.blockStyle.proPadding/2}px;`">
        <layout-item v-if="data.blockTitle.showTitle" :block="data.blockTitle">
          <template slot-scope="{ block }">
            <div class="card-title"
              :style="`padding-left:${data.blockStyle.proPadding/2}px;
              padding-right:${data.blockStyle.proPadding/2}px;
              margin-bottom:-${data.blockStyle.proPadding/2}px;
              text-align:${data.blockTitle.titleAlign};
              color:${data.blockTitle.color};
              font-size:${data.blockTitle.fontSize};
              font-weight:${data.blockTitle.fontWeight};`">
              <div :style="{'margin-top:-${data.blockStyle.proPadding/2}px;':data.blockTitle.showBackground}">{{block.title}}</div></div>
          </template>
        </layout-item>
        <div v-for="(block, index) in data.blockList"
          :key="index"
          class="layout_item_box"
          :style="`padding:${data.blockStyle.proPadding/2}px;`">
          <layout-item
            :block="block"
            @handle-edit="handleEditBlock(index)">
            <template slot-scope="{ block }">
              <div v-if="block.block_value"
                class="goods_item"
                :style="`border-radius:${data.blockStyle.proRadius}px`">
                <div class="goods_pic">
                  <div class="goods_pic_wrap" :style="`padding-top:${data.blockStyle.imgPercent}%;`">
                    <div class="goods_pic_img" :style="`background-image: url(${block.block_value.goods_image});`"></div>
                  </div>
                </div>
                <div class="goods_info" :style="`text-align:${data.blockStyle.textAlign}`">
                  <div v-if="data.blockStyle.showTitle||data.blockStyle.showDes" class="goods_info_title">
                    <h3 v-if="data.blockStyle.showTitle" class="title" :style="`font-weight:${data.blockStyle.fontWeight};`">{{ block.block_value.goods_name }}</h3>
                    <p v-if="data.blockStyle.showDes" class="goods_info_des">{{ block.block_value.goods_des }}</p>
                  </div>
                  <!-- 是否展示标签 -->
                  <div class="tag-list" v-if="data.blockStyle.showTag">
                    <div class="tag-item" v-for="(item,index) in block.block_value.tag_list" :key="index">{{item.tag_name}}</div>
                  </div>
                  <div class="goods_info_price">
                    <div class="price_info" :class="{'center':data.blockStyle.textAlign==='center'}" :style="`font-weight:${data.blockStyle.fontWeight};`">
                      <span v-if="data.blockStyle.showPrice" class="sale_price">
                        <div class="sale_price_view">
                          <span class="price_tag">¥</span>{{ block.block_value.goods_price | formatPrice }}
                        </div>
                      </span>
                    </div>
                    <div v-if="data.blockStyle.showBuyBtn&&data.blockStyle.textAlign!=='center'" class="goods_buy_btn type-1"><i class="el-icon-shopping-cart-2" style="color: rgb(255, 68, 68);"></i></div>
                  </div>
                </div>
              </div>
            </template>
          </layout-item>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  import mixin from '../mixin'
  import request from '@/utils/request'
  import { api } from '~/ui-domain'

  const noImg = '';
  export default {
    name: 'tpl_63',
    mixins: [mixin],
    title: '商品模块',
    dataTpl: {
      tpl_id: 63,
      blockList: [
        {
          block_type: 'GOODS',
          block_value: {
            'id': null,
            'goods_image': noImg,
            'goods_name': '此处显示商品名称，最多显示一行',
            'goods_des': '此处显示商品描述，最多显示一行',
            'goods_price': 99.9,
            'tag_list': [
              {
                'id': '1',
                'tag_name': '默认标签'
              }
            ]
          },
          block_opt: ''
        },
        {
          block_type: 'GOODS',
          block_value: {
            'id': null,
            'goods_image': noImg,
            'goods_name': '此处显示商品名称，最多显示一行',
            'goods_des': '此处显示商品描述，最多显示一行',
            'goods_price': 99.9,
            'tag_list': [
              {
                'id': '1',
                'tag_name': '默认标签'
              }
            ]
          },
          block_opt: ''
        },
        {
          block_type: 'GOODS',
          block_value: {
            'id': null,
            'goods_image': noImg,
            'goods_name': '此处显示商品名称，最多显示一行',
            'goods_des': '此处显示商品描述，最多显示一行',
            'goods_price': 99.9,
            'tag_list': [
              {
                'id': '1',
                'tag_name': '默认标签'
              }
            ]            
          },
          block_opt: ''
        }
      ],
      blockType: 'GOODS', // 'GOODS';'CATEGORY'
      blockClass: 'row_two', // row_one, row_two, row_three, row_list, row_hybrid
      blockStyle: {
        pagePadding: 15, // 页面间距
        proPadding: 10, // 商品间距
        proRadius: 4, // 商品角度
        imgPercent: 100, // 图片百分比
        textAlign: 'left',  // 文本对齐
        backFill: 'cover',  // 填充
        fontWeight: 'normal', // 文本粗细
        showTag: true, // 展示标签
        showTitle: true, // 显示标题
        showDes: true, // 显示描述
        showPrice: true, // 显示价格
        showOldPrice: false, // 显示原价
        showBuyBtn: true // 显示按钮
      },
      blockTitle: {
        showTitle: false, // 显示标题
        title: '卡片标题', // 标题内容
        titleAlign: 'left',  // 文本对齐
        fontSize: 14, // 标题大小
        fontWeight: 'normal', // 标题粗细
        color: '#333333', // 标题颜色
        block_opt: {}, // 标题链接
        showBackground: false, // 背景卡片
        backRadius: 4, // 卡片倒角
        backColor: '#ffffff' // 卡片颜色
      }
    },
    filters: {
      formatPrice(price) {
        if (typeof price !== 'number') return price
        return String(Number(price).toFixed(2)).replace(/\B(?=(\d{3})+(?!\d))/g, ',')
      }
    },
    // computed: {
    //   /*
    //     * @date 2020-01-16
    //     * @author wolfMan
    //     * @description {对比商品数据是否改变}
    //   */
    //   list () {
    //     return JSON.stringify(this.data.blockList);
    //   }
    // },
    mounted() {
      if (this.data.blockList) {
        let _list = this.data.blockList;
        let _ids = '';
        _list.forEach(item => {
          _ids = _ids === '' ? item.block_value.id : `${_ids},${item.block_value.id}`;
        });
        if (_ids !== '') this.getGoodsList(_ids);
      }
    },
    methods: {
      getGoodsList (_ids) {
        let _goodList = [];
        request({
          url: `${api.buyer}/goods/search?goods_ids=${_ids}&page_no=1&page_size=1000`,
          method: 'get',
          loading: false
        }).then(res => {
          console.log(res)
          let _base = this.MixinClone(this.data.blockList);
          res.data.forEach((item, index) => {
            _base[index].block_value = {
              'id': item.goods_id,
              'goods_image': item.small,
              'goods_name': item.name,
              'goods_des': item.meta_description,
              'goods_price': item.price,
              'tag_list': item.goods_list_tags
            };
          });
          this.$set(this.data, 'blockList', _base)
          this.$forceUpdate();
        });
      }
    },
    watch: {
      data(newVal, oldVal) {
        let _list = newVal.blockList;
        let _ids = '';
        _list.forEach(item => {
          _ids = _ids === '' ? item.block_value.id : `${_ids},${item.block_value.id}`;
        });
        if (_ids !== '') this.getGoodsList(_ids);
      // },
      // list (newVal, oldVal) {
      //   if (newVal !== oldVal) {
      //     let _list = JSON.parse(newVal);
      //     let _ids = '';
      //     if (!_list[0].block_value || !_list[0].block_value.id) {
      //       return;
      //     }
      //     _list.forEach(item => {
      //       _ids = _ids === '' ? item.block_value.id : `${_ids},${item.block_value.id}`;
      //     });
      //     this.getGoodsList(_ids);
      //   }
      }
    }
  }
</script>

<style type="text/scss" lang="scss" scoped>
  .tag-list {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    .tag-item {
      padding: 2px 6px;
      margin: 2px;
      border: 1px solid black;
      border-radius: 4px;
      font-size: 12px;
      white-space: nowrap;
    }
  }
</style>
